<!-- eslint-disable no-console -->
<!-- 质量管理模块 - 批次追溯 -->
<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
import type { BatchApi, DictApi } from '#/api';

import { reactive } from 'vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { DictResp, getBatchList } from '#/api';

// import {} from 'element-plus';
// 将字典数据添加到数组中;
const mes_qc_result = reactive<DictApi.SelectOption[]>([]);
const mes_order_status = reactive<DictApi.SelectOption[]>([]);
// const mes_source_doc_type = reactive<DictApi.SelectOption[]>([]);
DictResp(['mes_qc_result', 'mes_order_status']).then((res) => {
  // 将两个数组合并
  if (res.mes_qc_result) {
    mes_qc_result.push(...res.mes_qc_result);
  }
  if (res.mes_order_status) {
    mes_order_status.push(...res.mes_order_status);
  }
});

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入批次号',
      },
      fieldName: 'batchCode',
      label: '批次号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入产品物料编码',
      },
      fieldName: 'itemCode',
      label: '产品物料编码',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入产品物料名称',
      },
      fieldName: 'itemName',
      label: '产品物料名称',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入单位',
      },
      fieldName: 'unitOfMeasure',
      label: '单位',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入供应商编码',
      },
      fieldName: 'vendorCode',
      label: '供应商编码',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入供应商名称',
      },
      fieldName: 'vendorName',
      label: '供应商名称',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户编码',
      },
      fieldName: 'clientCode',
      label: '客户编码',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入客户名称',
      },
      fieldName: 'clientName',
      label: '客户名称',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入销售订单编号',
      },
      fieldName: 'coCode',
      label: '销售订单编号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入采购订单编号',
      },
      fieldName: 'poCode',
      label: '采购订单编号',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  submitButtonOptions: {
    content: '搜索',
  },
  // 是否在字段值改变时提交表单
  submitOnChange: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
};

const gridOptions: VxeGridProps<BatchApi.Row> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      align: 'left',
      field: 'batchId',
      title: '',
      type: 'checkbox',
      width: 50,
    },
    { field: 'batchCode', title: '批次编号' },
    { field: 'itemCode', title: '产品物料编码' },
    { field: 'itemName', title: '产品物料名称' },
    { field: 'specification', title: '规格型号' },
    { field: 'unitOfMeasure', title: '单位' },
    { field: 'vendorCode', title: '供应商编码' },
    { field: 'vendorName', title: '供应商名称' },
    { field: 'clientCode', title: '客户编码' },
    { field: 'clientName', title: '客户名称' },
    { field: 'coCode', title: '销售订单编号' },
    { field: 'poCode', title: '采购订单编号' },
    { title: '操作' },
  ],
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        const res = await getBatchList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
        return {
          total: res.total,
          items: res.rows,
        };
      },
    },
  },

  toolbarConfig: {
    // 是否显示搜索表单控制按钮
    // @ts-ignore 正式环境时有完整的类型声明
    search: true,
    refresh: { code: 'query' },
  },
};

const gridEvents: VxeGridListeners = {
  checkboxChange({ row }) {
    console.log(row);
  },
};

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});
</script>

<template>
  <div>
    <Grid />
  </div>
</template>
